<template>
    <div style="margin-bottom: 10px;">
        <h1>按钮组件</h1>
        <xh-button type="primary">123</xh-button>
        <XhButton>123</XhButton>
        <XhButton size="small" type="success" :round="true">123</XhButton>
        <XhButton type="warning">123</XhButton>
        <XhButton type="danger">123</XhButton>
        <XhButton type="info">123</XhButton>
    </div>
    <div>
        <h1>消息提示组件</h1>
        <XhButton type="primary" @click="handleMessage">点击</XhButton>
        <XhButton type="info" @click="handleMessage2">点击</XhButton>
        <XhButton type="success" @click="handleMessage3">点击</XhButton>
        <XhButton type="danger" @click="handleMessage4">点击</XhButton>
    </div>
    <div>
        <h1>Icon图标组件</h1>
        <XhIcon name="password" size="60" color="#eee">111</XhIcon>
        <XhIcon name="password" size="60" color="#eee">111</XhIcon>
        <XhIcon name="password" size="60" color="#eee">111</XhIcon>
        <XhIcon name="password" size="60" color="#eee">111</XhIcon>
    </div>
    <div>
        <h1>Tree 树形组件</h1>
        <xh-button @click="getCheckedNodes">获取选择的key</xh-button>
        <XHTree :data="treeData" :showCheckbox="true" ref="treeRef" node-key="id" />
    </div>
    <div>
        <h1>Steps 步骤条</h1>
        <XhButton type="primary" @click="activeIndex">下一步</XhButton>
        <XHSteps :active="4" align="center">
            <XHStep title="步骤1" icon="password" />
            <XHStep title="步骤2" icon="account" />
            <XHStep title="步骤3" icon="checkcode" />
            <XHStep title="步骤4">
                <template #icon>
                    <XhIcon name="password" size="20" color="#eee" />
                </template>
            </XHStep>
        </XHSteps>
    </div>
    <div>
        <h1>Pagination 分页组件</h1>
        <XhPagination :total="100" :pageSize="10" v-model:current-page="currentPage" :showJump="false"></XhPagination>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import XhIcon from '@xh-UI/components/icon';
import { XHMessage } from '@xh-UI/components/message';
import XHTree from '@xh-UI/components/tree';
import XhButton from '@xh-UI/components/button';
import XHSteps from '@xh-UI/components/steps';
import XHStep from '@xh-UI/components/step';
import XhPagination from '@xh-UI/components/pagination';

const handleMessage = () => {
    XHMessage({
        type: "success",
        message: "我是成功的消息提示",
        duration: 1000,
    });
};
const handleMessage2 = () => {
    XHMessage({
        type: "warning",
        message: "我是警告的消息提示",
        duration: 1000,
    });
};
const handleMessage3 = () => {
    XHMessage({
        type: "info",
        message: "我是info的消息提示",
        duration: 1000,
    });
};
const handleMessage4 = () => {
    XHMessage({
        type: "error",
        message: "我是失败的消息提示",
        duration: 1000,
    });
}

// 模拟树形数据
const treeData = [
    {
        id: "1",
        label: "Level one 1",
        children: [
            {
                id: "1-1",
                label: "Level two 1-1",
                children: [
                    {
                        id: "1-1-1",
                        label: "Level three 1-1-1",
                    },
                ],
            },
        ],
    },
    {
        id: "2",
        label: "Level one 2",
        children: [
            {
                id: "2-1",
                label: "Level two 2-1",
                children: [
                    {
                        id: "2-1-1",
                        label: "Level three 2-1-1",
                    },
                ],
            },
            {
                id: "2-2",
                label: "Level two 2-2",
                children: [
                    {
                        id: "2-2-1",
                        label: "Level three 2-2-1",
                    },
                ],
            },
        ],
    },
    {
        id: "3",
        label: "Level one 3",
        children: [
            {
                id: "3-1",
                label: "Level two 3-1",
                children: [
                    {
                        id: "3-1-1",
                        label: "Level three 3-1-1",
                    },
                ],
            },
            {
                id: "3-2",
                label: "Level two 3-2",
                children: [
                    {
                        id: "3-2-1",
                        label: "Level three 3-2-1",
                    },
                ],
            },
            {
                id: "3-3",
                label: "Level two 3-3",
            },
        ],
    },
];

const treeRef = ref(null);

const getCheckedNodes = () => {
    const keys = treeRef.value.getCheckedNodes();
    console.log("keys: ", keys);
};

let active = ref(0)

const activeIndex = () => {
    active.value = active.value + 1;
    console.log(active.value, "active.value")
}

const currentPage = ref(1)
</script>

<style lang="less">
.xh-button {
    margin-right: 10px;
}
</style>